<template>
	<view>
		<view class="cu-bar bg-white">
			<view class="action">
				<navigator open-type="navigateBack">
					<text class="cuIcon-back text-gray"></text> 返回
				</navigator>
			</view>
			<view class="content text-bold">
				菜单
			</view>
		</view>
		<!-- 轮播图 -->
		<swiper class="screen-swiper round-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			duration="500">
			<swiper-item v-for="(item,index) in 4" :key="index">
				<image :src="'https://ossweb-img.qq.com/images/lol/web201310/skin/big3900'+index+ '.jpg'"
					mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="VerticalBox">
			<!-- 左边分类区 -->
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop"
				style="height:calc(100vh - 375upx)">
				<view class="cu-item"
					:class="[toggleDelay?'animation-slide-bottom':'',index==tabCur?'text-green cur':'']"
					:style="[{animationDelay: (index + 1)*0.3 + 's'}]" v-for="(item,index) in list" :key="index"
					@tap="TabSelect" :data-id="index">
					Tab-{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 375upx)"
				:scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				<view class="padding-top" v-for="(item,index) in list" :key="index" :id="'main-'+index">
					<view class="cu-bar solid-bottom bg-white">
						<view class="action">
							<text class="cuIcon-title text-green"></text> Tab-{{item.name}}-菜品分类
						</view>
					</view>
					<view class="cu-list menu-avatar">
						<!-- 右边菜单列表 -->
						<view class="cu-item" v-for="(item,index) in 6" :key="item"
							:class="[toggleDelay?'animation-slide-bottom':'']"
							:style="[{animationDelay: (index + 1)*0.3 + 's'}]">
							<view class="cu-avatar radius lg"
								style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81007.jpg);">
							</view>
							<view class="content">
								<view><text class="text-cut">{{item}}</text></view>
								<view class="text-grey text-xs">今日已售：1000</view>
								<view class="text-gray text-sm flex"> <text class="text-cut"> 菜品介绍内容</text></view>
							</view>
							<view class="action">
								<view @tap="AddCart" data-target="DialogModal1" class="cu-tag round sm">+</view>
							</view>
						</view>
						<!-- 弹出选项框 -->
						<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
							<view class="cu-dialog">
								<view class="cu-bar bg-white justify-end">
									<view class="content">规格</view>
									<view class="action" @tap="hideModal">
										<text class="cuIcon-close text-red"></text>
									</view>
								</view>
								<!-- 配料选择区 -->
								<view class="padding-xl">
									<radio-group class="block" @change="RadioChange">
										<view class="cu-form-group margin-top">
											<view class="title">酱料</view>
											<radio :class="radio=='fanqie'?'checked':''"
												:checked="radio=='fanqie'?true:false" value="fanqie">番茄</radio>
											<radio :class="radio=='heijiao'?'checked':''"
												:checked="radio=='heijiao'?true:false" value="heijiao">黑椒汁</radio>
										</view>
									</radio-group>

									<radio-group class="block" @change="RadioChange2">
										<view class="cu-form-group margin-top">
											<view class="title">熟度</view>
											<radio :class="radio=='three'?'checked':''"
												:checked="radio2=='three'?true:false" value="three">3分</radio>
											<radio :class="radio=='five'?'checked':''"
												:checked="radio2=='five'?true:false" value="five">5分</radio>
											<radio :class="radio=='seven'?'checked':''"
												:checked="radio2=='seven'?true:false" value="seven">7分</radio>
											<radio :class="radio=='ten'?'checked':''"
												:checked="radio2=='ten'?true:false" value="ten">10分</radio>
										</view>
									</radio-group>
								</view>
								<view class="cu-bar bg-white justify-end">
									<view class="action">
										<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
										<button class="cu-btn bg-green margin-left" @click="hidesure()">确定</button>

									</view>
								</view>
							</view>
						</view>
						<!-- 弹出选项框 end -->
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 底部购物车导航栏 -->
		<view style="position:fixed;bottom: 0;width: 100%;">
			<view class="cu-bar bg-white tabbar border shop btn-group">

				<view class="action" style="width: 300rpx;" @tap="ShowCart" data-target="bottomModal">
					<view class="cuIcon-cart">
						<view class="cu-tag badge">{{CartList.classChild.length}}</view>
					</view>
					购物车
				</view>
				<view class="btn-group">
					<button class="cu-btn  round shadow-blur "
						:class="this.CartList.classChild.length == 0 ? 'bg-grey':'bg-red'"
						@tap="Order_now">立即下单</button>
				</view>
			</view>
			<!-- 一点菜单区 -->
			<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<view class="action text-green">确定</view>
						<view class="action text-blue" @tap="hideModal">取消</view>
					</view>
					<view class="padding">
						<scroll-view class="VerticalMain" scroll-y scroll-with-animation
							style="height:calc(100vh - 800upx)" :scroll-into-view="'main-'+mainCur">
							<view class="cu-list menu-avatar">
								<view class="cu-item" v-for="(item,index) in CartList.classChild" :key="index"
									:class="[toggleDelays?'animation-slide-bottom':'']"
									:style="[{animationDelay: (index + 1)*0.3 + 's'}]">
									<view class="cu-avatar radius lg"
										:style="{backgroundImage: 'url(' + item.ListImage + ')'}"></view>
									<view class="content">
										<view><text class="text-cut">{{item.ListName}}</text></view>
										<view class="text-grey text-xs flex" v-for="(items,index2) in item.chilid"
											:key="index2">
											{{items.Sauce.fanqie}}
											<text>酱料：{{items.Sauce.fanqie}}</text>
											<text class="margin-left-sm">熟度：{{items.Raw_cooked.five}}</text>
										</view>
										<view class="text-gray text-sm flex"> <text class="text-cut"> 菜品介绍内容</text>
										</view>
									</view>
									<view class="action">
										<!-- 移除菜单 -->
										<view @click="ReduceCart(item.ListId)" data-target="DialogModal1"
											class="cu-tag round sm">-
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<!-- 提示未添加商品 -->
			<view class="cu-modal" :class="showCartList=='showCartLists'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">提示</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<!-- 配料选择区 -->
					<view class="padding-xl">还没有添加任何商品！</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn bg-green margin-left" @tap="showCartList = null">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import CartList from "../../static/js/Cart.json"
	export default {
		data() {
			return {
				Cartlist: {
					"ListName": "菲力牛排add",
					"ListImage": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9946686c-d57d-4872-b5f3-438db5a99dfe/ad1fba60-37c9-4f9f-a3d4-a9267741d3b3.jpg",
					"ListId": "0100",
					"Original_price": "229.00",
					"Current_price": "209.99",
					"introduce": "",
					"Monthly_sales": "233",
					"chilid": [{
						"Sauce": {
							"fanqie": "番茄",
							"heijiao": "黑椒"
						},

						"Raw_cooked": {
							"three": "3",
							"five": "5",
							"seven": "7",
							"ten": "10"
						},
						"p_size": {
							"size": ""
						}
					}]
				},
				CartList,
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				modalName: null,
				showCartList: null, //提示
				load: true,
				radio: 'fanqie',
				radio2: 'ten',
				cartNumber: 0, // 购物车数量
				animation: '',
				toggleDelay: false,
				toggleDelays: false,
			};
		},
		onLoad() {
			this.ToggleDelay()
			this.CartList = CartList.data[0]
			this.cartNumber = CartList.data[0].classChild.length
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			let list = [{}];
			for (let i = 0; i < 5; i++) {
				list[i] = {};
				list[i].name = String.fromCharCode(65 + i);
				list[i].id = i;
			}
			this.list = list;
			this.listCur = list[0];
		},
		onReady() {
			uni.hideLoading()
		},
		computed: {},
		methods: {
			// 动态效果
			ToggleDelay() {
				this.toggleDelay = true;
				setTimeout(() => {
					this.toggleDelay = false
				}, 2500)
			},
			ToggleDelays() {
				this.toggleDelays = true;
				setTimeout(() => {
					this.toggleDelays = false
				}, 2500)
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				return false //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						// console.log(scrollTop)
						return false
					}
				}
			},
			// 查看购物车
			ShowCart(e) {
				this.ToggleDelays()
				if (this.cartNumber <= 0) {
					console.log("您还没有购买的商品！")
					this.showCartList = 'showCartLists'
				} else {
					this.modalName = 'bottomModal'
				}
			},
			// 加入购物车
			AddCart(e) {
				this.modalName = 'DialogModal1'
			},
			//隐藏弹出选项框
			hideModal(e) {
				this.modalName = null
			},
			/*选择类型*/
			RadioChange(e) {
				this.radio = e.detail.value
			},
			RadioChange2(e) {
				this.radio2 = e.detail.value
			},
			// 确认添加商品
			hidesure() {
				console.log("cart", this.radio2, this.radio)
				// this.CartList.classChild.unshift(e.Cartlist)
				this.hideModal()
			},
			// 移除商品
			ReduceCart(e) {
				if (this.CartList.classChild.length < 1) {
					this.hideModal()
				} else {
					console.log("yichu", this.CartList.classChild)
					this.CartList.classChild = this.CartList.classChild.filter(Listen => Listen.ListId !== e)
					this.cartNumber = this.CartList.classChild
				}
			},
			Order_now(e) {
				if (this.CartList.classChild.length == 0) {
					wx.showToast({
						title: '暂无商品', // 标题
						icon: 'none', // 图标类型，默认success
						duration: 1500 // 提示窗停留时间，默认1500ms
					})
				}
				console.log("tow", this.CartList.classChild.length)
				console.log("确认下单", this.CartList.classChild)
			}
		},
	}
</script>

<style>
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
</style>
